<template>
	<view class="payment-order">
		<view class="payment-order-detail">
			<view class="payment-order-detail-image">
				<image :src="'data:image/jpg;base64,'+orderDetail.info.orderProductImage"></image>
			</view>
			<view class="payment-order-detail-text">商品名称：{{orderDetail.info.orderNumber}}</view>
			<view class="payment-order-detail-text">{{orderDetail.info.orderProductName}}</view>
			<view class="payment-order-detail-text"><text class="money">￥{{orderDetail.info.orderMoney}}</text></view>
			<view class="payment-order-detail-text">{{orderDetail.info.orderServeStart}}</view>
		</view>
		<view><button type="primary" @click="paymentOrder">确定支付</button></view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getOrder,
		payOrder
	} from '@/api/user.js'
	import {
		createordernum
	} from '../../utils/orderUtil.js'
	import {
		useStore
	} from 'vuex' // 引入useStore 方法
	const store = useStore();

	let options = ref([])

	let onLoadValue = ref({});
	let orderDetail = reactive({
		info: {}
	})
	onLoad((option) => {
		// console.log(option)
		onLoadValue.value = option;
	});
	const getOrderDetail = () => {
		let data = {
			id: onLoadValue.value.id
		}
		getOrder(data).then(res => {
			let {
				code,
				data
			} = res;
			if (code == 200) {
				console.log(data)
				orderDetail.info = data;
			}
		})
	}
	const paymentOrder = () => {
		console.log(orderDetail.info);
		uni.showModal({
			title: '提示',
			content: '确定购买该商品吗？',
			success: function(res) {
				console.log(orderDetail.info._id)
				let data = {
					id: orderDetail.info.orderNumber
				}
				payOrder(data).then(res => {
					console.log(res)
					let {
						code,
						data
					} = res;
					if (code == 200) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							appid: data.appid,
							timeStamp: data.timeStamp, // 时间戳（单位：秒）
							nonceStr: data.nonceStr, // 随机字符串
							package: data.package, // 固定值
							signType: data.signType, //固定值
							paySign: data.paySign, //签名
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								console.log("支付成功");
								uni.showToast({
									title: '支付成功',
									duration: 1000
								});
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/paySuccess/paySuccess'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								console.log("支付失败");
							}
						});
					}
				})
			},
		})
	}
	onMounted(() => {
		getOrderDetail()
	})
</script>

<style lang="scss">
	.payment-order {
		display: flex;
		flex-direction: column;

		&-detail {
			width: 100%;

			&-image {
				image {
					width: 100%;

				}
			}

			&-text {
				padding: 10upx;

				.money {
					color: #ff893f;
				}
			}
		}

		&-btn {
			position: fixed;
			width: 100%;
			bottom: 20px;
			display: flex;
			justify-content: space-around;
		}

	}
</style>
